<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="../js/layui/layui.js" ></script>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script type="text/javascript" src="../js/axios.js" ></script>
		<link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="shortcut icon" href="../img/icon.png">
	</head>

	<body>
	<div id="app">
		<main class="pab150">
			<section class="indexBanner mbt30">
				<div class="container">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<img src="../img/banner.jpg" onclick="sdd()" class="objectCover" />
							</div>
							<div class="swiper-slide">
								<img src="../img/banner.jpg" class="objectCover" />
							</div>
							<div class="swiper-slide">
								<img src="../img/banner.jpg" class="objectCover" />
							</div>
						</div>
						<div class="swiper-pagination swiper-pagination-white"></div>
					</div>
				</div>
			</section>
			<section class="menu mbt30">
				<div class="container">
					<div class="flexBox">
						<a href="profile.html?gid=f9939a294cb7400396a2c7927b5a7226"  class="item">
							<div class="iconBox">
								<img src="../img/homeIcon1.jpg" class="icon"/>
							</div>
							<h6 class="name">黑图视界</h6>
						</a>
						<a href="gymList.html" class="item">
							<div class="iconBox">
								<img src="../img/homeIcon2.jpg" class="icon"/>
							</div>
							<h6 class="name">购票</h6>
						</a>
						<a href="yuding.html" class="item">
							<div class="iconBox">
								<img src="../img/homeIcon3.jpg" class="icon"/>
							</div>
							<h6 class="name">惊喜预约</h6>
						</a>
					</div>
				</div>
			</section>
			<section class="ads mbt30">
				<div class="container">
					<img src="../img/ads.jpg" id="imgs" class="adsPic"/>
				</div>
			</section>
			<section class="infoBox">
				<div class="container" @click="gymDetail(gym.id)" v-for="gym in pageInfo.list">
					<ul class="list whiteBg radius20">
						<li class="listItem clearfix">
							<div class="icon icon1"></div>
							<div class="text">{{gym.address}}</div>
						</li>
						<li class="listItem clearfix">
							<div class="icon icon2"></div>
							<div class="text">{{gym.manager.phonenum}}</div>
							<a href="tel:1800000000" class="callBtn">拨打电话</a>
						</li>
					</ul>
				</div>
				<div id="test1" style="text-align: center"></div>
			</section>

		</main>

		
		<footer class="footer clearfix">
			<a class="item active" href="index.html">
				<div class="icon icon1"></div>
				<p class="text">展馆展示</p>
			</a>
<!--			<a class="item active" href="index.html">-->
<!--				<div class="icon icon"></div>-->
<!--				<p class="text">联系客服</p>-->
<!--			</a>-->
			<a class="item" href="person.html">
				<div class="icon icon2"></div>
				<p class="text">个人中心</p>
			</a>			
		</footer>
	</div>
		<script>
			function sdd(){
				console.log(11)
			}
			let app1=new Vue({
				el:"#app",
				data:{pageInfo:{}},
				methods:{
					find(start,pageSize){
						axios.get("/gym/queryAll",{
							params:{
								start:start,
								pageSize:pageSize,
								navigatePages:2
							}
						})
						.then(function(response){
							console.log(response);
							app1.pageInfo=response.data;
						});
					},
					gymDetail(id){
						location.href="/userclient/profile.html?gid="+id;
					},
				},
				created(){
					this.find(1,2);
				}
			});
		</script>
	<script>
		layui.use('laypage', function(){
			var laypage = layui.laypage;

			//执行一个laypage实例
			laypage.render({
				elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
				,count: app1.pageInfo.total //数据总数，从服务端得到
				,limit:2
				,jump(obj){
					app1.find(obj.curr,2);
				}
			});
		});
	</script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
	</body>

</html>